import { createFileRoute } from '@tanstack/react-router'
import { motion } from 'framer-motion'
import section2Icon1 from '@/assets/images/startup-incubation/section2-icon1.svg'
import section2Icon2 from '@/assets/images/startup-incubation/section2-icon2.svg'
import section2Icon3 from '@/assets/images/startup-incubation/section2-icon3.svg'
import section3Icon1 from '@/assets/images/startup-incubation/section3-icon1.svg'
import section3Icon2 from '@/assets/images/startup-incubation/section3-icon2.svg'
import section3Icon3 from '@/assets/images/startup-incubation/section3-icon3.svg'

export const Route = createFileRoute('/_no-auth/startup-incubation/')({
  component: Text,
})

function Text() {
  const section2List = [
    {
      icon: section2Icon1,
      title: '模块培训',
      message: '技能实操实战训练',
    },
    {
      icon: section2Icon2,
      title: '实战应用',
      message: '科创项目孵化跟进',
    },
    {
      icon: section2Icon3,
      title: '专业技能',
      message: '配备数字化技能工具',
    },
  ]
  const section3List = [
    {
      icon: section3Icon1,
      title: '项目实战',
      message: '项目模块实战辅导',
    },
    {
      icon: section3Icon2,
      title: '运营管理',
      message: '模块实战案全教材',
    },
    {
      icon: section3Icon3,
      title: '职业发展',
      message: '对接企业平台创业',
    },
  ]
  return (
    <div className={'layout_top min-h-screen overflow-hidden bg-[#FAFAFA]'}>
      {/*  section1 */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 1 }}
        className={
          "layout relative bg-[url('@/assets/images/startup-incubation/section1-bg.webp')]" +
          ' 3xl:pt-[13.3rem] bg-cover bg-no-repeat pt-11 pb-1 lg:pt-[15rem] lg:pb-4' +
          " lg:bg-[url('@/assets/images/startup-incubation/section1-bg-pc.webp')]"
        }
      >
        <h1 className={'text-primary layout-h1 leading-line-1 font-bold'}>
          新佰时·
          <br className={'lg:hidden'} />
          创业孵化
        </h1>
        <div
          className={
            'bg-primary 3xl:text-[3.5rem] leading-line-2 relative z-10 mt-2 inline-block font-extralight lg:px-2' +
            ' lg:text-4xl' +
            ' px-1' +
            ' text-xl' +
            ' text-white'
          }
        >
          <span className={'3xl:text-7xl font-bold lg:text-4xl'}>NBT- </span>
          Entrepreneurship
        </div>
        {/*line*/}
        <ul
          className={
            '3xl:space-y-20 absolute right-0 bottom-0 flex w-full flex-col items-end space-y-10' +
            ' lg:space-y-16'
          }
        >
          <li
            className={'bg-primary layout-left right-0 h-[0.125rem] lg:h-3'}
          ></li>
        </ul>
      </motion.div>
      {/*section2*/}
      <div className={'layout 3xl:mt-44 relative mt-16 lg:mt-36'}>
        <h2
          className={
            'layout-h2 text-primary leading-line-1 flex items-center justify-center gap-6 text-center' +
            ' lg:gap-20' +
            ' font-bold'
          }
        >
          <p className={'title_left_line'}></p>
          <span>职业技能孵化</span>
          <p className={'title_right_line'}></p>
        </h2>
        <ul
          className={
            '3xl:mt-20 mt-10 space-y-10 text-center lg:mt-16 lg:flex lg:items-center lg:justify-center lg:gap-[15%]' +
            ' lg:space-y-0'
          }
        >
          {section2List.map((item, index) => (
            <motion.li
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 1 + index * 0.5 }}
              key={item.title}
            >
              <img
                className={'3xl:w-14 mx-auto lg:w-14'}
                src={item.icon}
                alt='icon'
              />
              <div
                className={
                  'text-text-8 leading-line-15 3xl:text-xl mt-2 text-base lg:mt-4 lg:text-lg'
                }
              >
                <p>{item.title}</p>
                <p>{item.message}</p>
              </div>
            </motion.li>
          ))}
        </ul>
      </div>

      {/*section3*/}
      <div className={'layout 3xl:py-44 relative py-16 lg:py-36'}>
        <h2
          className={
            'layout-h2 text-primary leading-line-1 flex items-center justify-center gap-6 text-center' +
            ' lg:gap-20' +
            ' font-bold'
          }
        >
          <p className={'title_left_line'}></p>
          <span>就业发展孵化</span>
          <p className={'title_right_line'}></p>
        </h2>
        <ul
          className={
            '3xl:mt-20 mt-10 space-y-10 text-center lg:mt-16 lg:flex lg:items-center lg:justify-center lg:gap-[15%]' +
            ' lg:space-y-0'
          }
        >
          {section3List.map((item, index) => (
            <motion.li
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 1 + index * 0.5 }}
              key={item.title}
            >
              <img
                className={'3xl:w-14 mx-auto lg:w-14'}
                src={item.icon}
                alt='icon'
              />
              <div
                className={
                  'text-text-8 leading-line-15 3xl:text-xl mt-2 text-base lg:mt-4 lg:text-lg'
                }
              >
                <p>{item.title}</p>
                <p>{item.message}</p>
              </div>
            </motion.li>
          ))}
        </ul>
      </div>
    </div>
  )
}
